<template>
  <div class="section section-one">
    <div class="title">
      <!-- <span>航标异常信息及时处置率</span> -->
    </div>
    <div class="content">
      <div class="sub-title">
        <span class="self-icon" v-show="!outer" @click="backChart">
          <el-icon :size="'large'" :color="'#ffffff'">
            <Back />
          </el-icon>
        </span>
      </div>
      <div class="main-chart-ref" ref="MainChartRef">

      </div>
    </div>
    <!-- <div class="divider"></div> -->
  </div>
</template>
<script>
let ChartIns = null;
import Api from '@/api'
import axios from 'axios';
export default {
  name: "SectionTwo",
  components: {},
  props: {},
  data() {
    return {
      outer: true,
      countOfShipInSocial: '---',
      color: ["#4d88ff", "#fecc37", "#3ae6ff", "#fccc30"],
      // 在册数据
      beRegisteredData: [],
      xAxisData: ["2023.08月"],
      seriesData: [90],
      seriesData1: [99],
      seriesData2: [85],
    };
  },
  computed: {
    subTitle() {
      return this.outer ? '工作船统计' : '工作船总数'
    }
  },
  mounted() {
    this.initChart();
    this.getCountOfShipInSocial();
  },
  unmounted() {
    if (ChartIns) {
      ChartIns.dispose();

    }
  },
  methods: {
    toRGB(color, opacity) {
      if (!/^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/.test(color)) return;
      const chars = color.split("").splice(1);
      const r = `0x${chars[0]}${chars[1]}`;
      const g = `0x${chars[2]}${chars[3]}`;
      const b = `0x${chars[4]}${chars[5]}`;
      return `rgba(${parseInt(r)},${parseInt(g)},${parseInt(b)},${typeof opacity === "number" ? opacity : "1"
        })`;
    },
    initChart() {
      const that = this;
      const chartDom = that.$refs.MainChartRef;
      ChartIns = echarts.init(chartDom);
      that.renderChart({
        xAxisName: that.xAxisData,
        seriesData: that.seriesData,
        seriesData1: that.seriesData1,
        seriesData2: that.seriesData2,
        datazoom: false,
      })

    },
    renderChart({ xAxisName, seriesData, seriesData1, seriesData2, datazoom }) {
      const that = this;
      const option = {
        color: that.color,
        tooltip: {
          trigger: "axis",
          // position: ['10%', '-30%'],
          confine: true,//限制图表区域内
          textStyle: {
            align: "left"
          },
          axisPointer: {
            type: "shadow"
          },
          formatter: function (params) {
            var str = params[0].name + '<br>'
            for (let item of params) {
              str += item.seriesName + ' : ' + item.value + '%<br>'
            }
            return str;
          }

        },
        legend: {
          align: "right",
          right: 0,
          itemHeight: 8,
          itemWidth: 25,
          show: true,
          padding: [0, 5],
          textStyle: {
            color: "#fff",
            padding: 5,
          },
          data: ['航标异常信息及时处置率', '处置出航响应及时率', '报警及时回复率'],
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "5%",
          top: "25%",
          containLabel: true
        },
        yAxis: {
          type: "value",
          name: '百分比',
          min: 0, // 最小值
          max: 100,// 最大值
          nameTextStyle: {
            color: "#ffffff"
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(133,194,255,.5)"
            }
          },
          boundaryGap: ["0", "40%"],
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(58,112,197,.12)"
            }
          },
          splitNumber: 2,
          axisLabel: {
            color: "#ffffff",
            formatter: function (value) {
              return value + "%";
            }
          },
          splitArea: {
            show: false,
            areaStyle: {
              color: "rgba(58,112,197,.1)"
            }
          },
        },
        xAxis: {
          type: "category",
          data: xAxisName,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(133,194,255,.5)"
            }
          },
          axisLabel: {
            color: "#ffffff",
            interval: 0,
            width: 80,
            overflow: "truncate",
            ellipsis: "..."
          }
        },
        series: [
          {
            type: 'bar',
            name: '航标异常信息及时处置率',
            barMinWidth: 10,
            barMaxWidth: 15,
            label: {
              show: true,
              position: "top",
              borderColor: "transparent",
              borderWidth: 0,
              fontSize: 12,
              color: "#fff",
              shadowColor: "transparent",
              fontFamily: "YouSheBiaoTiHei",
              formatter: '{c} %' //格式化数据
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: that.color[0] },
                { offset: 0.985, color: that.toRGB(that.color[0], 0.1) },
                { offset: 0.985, color: that.toRGB(that.color[0], 1) },
                { offset: 1, color: that.toRGB(that.color[0], 1) }
              ])
            },
            data: seriesData,
            barGap: 1.7,
          },
          {
            type: 'bar',
            name: '处置出航响应及时率',
            barMinWidth: 10,
            barMaxWidth: 15,
            label: {
              show: true,
              position: "top",
              borderColor: "transparent",
              borderWidth: 0,
              fontSize: 12,
              color: "#fff",
              shadowColor: "transparent",
              fontFamily: "YouSheBiaoTiHei",
              formatter: '{c} %' //格式化数据
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: that.color[1] },
                { offset: 0.985, color: that.toRGB(that.color[1], 0.1) },
                { offset: 0.985, color: that.toRGB(that.color[1], 1) },
                { offset: 1, color: that.toRGB(that.color[1], 1) }
              ])
            },
            data: seriesData1
          },
          {
            type: 'bar',
            name: '报警及时回复率',
            barMinWidth: 10,
            barMaxWidth: 15,
            label: {
              show: true,
              position: "top",
              borderColor: "transparent",
              borderWidth: 0,
              fontSize: 12,
              color: "#fff",
              shadowColor: "transparent",
              fontFamily: "YouSheBiaoTiHei",
              formatter: '{c} %' //格式化数据
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                { offset: 0, color: that.color[2] },
                { offset: 0.985, color: that.toRGB(that.color[2], 0.1) },
                { offset: 0.985, color: that.toRGB(that.color[2], 1) },
                { offset: 1, color: that.toRGB(that.color[2], 1) }
              ])
            },
            data: seriesData2
          }
        ],
        dataZoom: [{
          type: "slider",
          show: datazoom,
          height: 10,
          start: datazoom ? 0 : 0,//位置
          end: datazoom ? 20 : 100,
          moveHandleSize: 5,
          textStyle: { color: "#fff" }
        }
        ]
      }
      option && ChartIns.setOption(option, true);
    },
    backChart() {
      this.outer = true;
      ChartIns.clear();
    },
    // 获取社会船
    getCountOfShipInSocial() {
      Api.getCountOfShipInSocial().then(res => {
        if (res.data && res.data.data) {
          if (res.data.data[0]) {
            this.countOfShipInSocial = res.data.data[0].count || '---'
          }
        }
      })
    }
  }
};
</script>
<style lang="less" scoped>
.section-one {
  // padding-top: 40px;

  &>.title {
    background-image: url(@/components/SupermapCard/images/title-main-header-v2.png);
    background-repeat: no-repeat;
    padding: 0 10px;
    font-family: 'YouSheBiaoTiHei', Arial, Helvetica, sans-serif;
    font-size: 17px;
    color: #fff;
  }

  &>.divider {
    border-top: 1px dashed rgba(255, 255, 255, 0.3);
    margin: 20px 10px;
  }
}

.content {
  &>.count {
    padding-left: 10px;
    color: #fff;
    font-weight: bolder;
    height: 32px;
    line-height: 32px;

    &>.number {
      padding-left: 20px;
      font-size: 20px;
      font-family: 'YouSheBiaoTiHei', Arial, Helvetica, sans-serif;
      color: #fecc37;
    }
  }
}

.main-chart-ref {
  height: 200px;
}

.sub-title {
  line-height: 1.8;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;

  &>.title {
    color: #fff;
    font-weight: bolder;
  }

  &>.self-icon {
    cursor: pointer;
  }
}
</style>